<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title>个人信息认证</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
        .Header .fixed_header .header_main .page_title{
            position:absolute;
            left:50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        #register{
            margin-top:44px;
            border-top:1px solid transparent;
        }
        #register .btn-box button{
            font-size: 17px;
            background: rgb(185,43,39);
        }
        #register li.form-item{
            background:#ececec;
            padding-top:10px;
        }
        #register input{background: #fff}
        #register h2{
            font-size: 16px;
            font-weight: bold;
            margin-left: 10px;
            margin-right:10px;
        }
        #register .text_note{
            margin:20px 10px;
        }
        li{list-style:none;font-size:16px;}
        .part1,.part2{
            height: 30px;
            box-sizing: border-box;
        }
        .part1{
            width:105px;
            line-height: 30px;
            margin-left: 10px;
            font-size: 15px;
        }
        #register #secondPart .part2{
            margin-left: 125px;
        }
        #register #firstPart .part2{
            margin-left: 110px;
        }
        .part2{
            margin-right: 10px;
            padding: 3px 10px;
            background: #fff;
            border:1px solid #ccc;
        }
        .part2>input{width:100%;}
        #tishiinfor{
            padding:10px;
        }
        .btn-box{
            position:relative;
            padding:10px;
            height:80px;
        }
        .btn-box button{
            width:250px;
            height:40px;
            background: #B92B27;
            color:#fff;
            border:none;
            border-radius: 3px;

            position:absolute;
            left:50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        .btn-box>div{
            display:inline-block;
            width:50%;
        }
        #register #secondPart h2{text-align: center;}
        #register #secondPart .text_note{
            font-size: 14px;
            color:#999;
        }
        #register #secondPart .btn-box>div{overflow: hidden;}
        .saveBtn,.skipBtn{
            display:inline-block;
            width:55px;
            height:26px;
            margin-top:30px;
            text-align: center;
            line-height: 26px;
            color:#fff;
            border-radius: 3px;
        }
        .saveBtn{
            background: rgba(153, 153, 0, 1);
        }
        .skipBtn{
            margin-left:35px;
            background: rgba(185, 43, 39, 1);
        }

        #secondPart{
            display:none;
        }
    </style>
    <style>
        #finishNote{
            display:none;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            z-index: 9999;
            width:100%;
            background:rgba(0,0,0,0.75);
        }
        #finishNote>div{
            position:relative;
            width:100%;
            height:100%;
        }
        #finishNote .model{
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            padding:20px 15px;
            border-radius: 3px;
            background: #fff;
        }
        #finishNote .model div{
            min-width:210px;
            padding:10px;
        }
        #finishNote h4{font-weight: normal;}
        #finishNote .model p.rt{
            color:#4ABD46;
            margin-left:20px;
        }
        #finishNote .model p.rt a{color:#999;}
    </style>
</head>
<body>
<!--验证-->
<div id="register">

    <div id="firstPart">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header">
                <div class="header_main">
                    <div class="mweb_modal_back_button" onclick="goback()"></div>
                    <div class="page_title unified">
                        <span>个人信息认证</span>
                    </div>
                </div>
            </div>
        </div>
        <p class="text_note">请补填您的手机号、身份证号</p>
        <h2>确认及补充内容</h2>
        <ul class="bind_box">
            <li class="form-item">
                <div class="part1 lf">真实姓名:</div>
                <div class="part2">
                    <input id="realNameInput" type="text" class="field-text nofastclick r-focus" maxlength="7" placeholder="请输入真实姓名">
                </div>
            </li>
            <li class="form-item">
                <div class="part1 lf">手机号码:</div>
                <div class="part2">
                    <input id="phonenumber" type="tel" class="field-text nofastclick r-focus" maxlength="11" placeholder="11位数字">
                </div>
            </li>
            <li class="form-item">
                <div class="part1 lf">身份证号码:</div>
                <div class="part2">
                    <input id="idInput" type="text" class="field-text nofastclick r-focus" placeholder="请输入身份证号码">
                </div>
            </li>
        </ul>
        <p id="tishiinfor" style="color:#DF2029;padding-top:10px;margin:0;height:20px;text-align: center;"></p>
        <div class="btn-box">
            <button id="nextstep" class="btn-primary full-width cannot">确认</button>
        </div>
    </div>

    <div id="secondPart">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header">
                <div class="header_main">
                    <div class="mweb_modal_back_button" onclick="backPage()"></div>
                    <div class="page_title unified">
                        <span>申请个人认证</span>
                    </div>
                </div>
            </div>
        </div>
        <h2>您的认证信息已提交</h2>
        <p class="text_note">您还可以完善个人职位及公司信息，他人更多机会看到您发的内容</p>
        <ul class="bind_box">
            <li class="form-item">
                <div class="part1 lf">职位/称号:</div>
                <div class="part2">
                    <input id="professionInput" type="text" class="field-text nofastclick r-focus" placeholder="请输入职位/称号">
                </div>
            </li>
            <li class="form-item">
                <div class="part1 lf">公司/组织名称:</div>
                <div class="part2">
                    <input id="companyInput" type="text" class="field-text nofastclick r-focus" placeholder="请输入公司/组织名称">
                </div>
            </li>
        </ul>
        <p id="tishiinfor2" style="color:#DF2029;padding-top:10px;margin:0;height:20px;text-align: center;">
        <div class="btn-box">
            <div></div><div>
                <span class="skipBtn rt" onclick="skip()">跳过</span>
                <span class="saveBtn rt" onclick="saveMore()">保存</span>
            </div>
        </div>
    </div>

    <div id="finishNote">
        <div>
            <div class="model">
                <h4>提示：</h4>
                <div>
                    您的个人认证信息已提交，现在可以发布内容啦
                </div>
                <div>
                    <p class="rt" onclick="skip()">去发布</p>
                    <p class="rt"><a href="pulu.html">返回主页</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://www.pulu.com/weixin/ftnjs/urlnote.js"></script>
<script src="https://www.pulu.com/weixin/js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
    $.ajax({
        type:"POST",
        url:userurl,
        data: {"loginuserId": $.cookie("MYID"),"userId": $.cookie("MYID")},
        datatype: "json",
        success:function(d){
            $("#realNameInput").val(d.Data.userNick);
        }
    });

    function goback(){history.go(-1);}

    //验证身份证
    function scCard(){
        var scCard=document.getElementById("idInput").value;
        console.log(scCard);
        if(scCard.length!=0){
            if(!checkCard(scCard)){
                $("#tishiinfor").html("请输入正确的身份证号码");
                return false;
            }else{
                $("#tishiinfor").html("");
                return true;
            }
        }else{
            $("#tishiinfor").html("请输入正确的身份证号码");
            return false;
        }
    }
    //function checkidno(obj) {
    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
        21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
        33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
        42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
        51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
        63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
    };
    checkCard = function(obj) {
        //var card = document.getElementById('card_no').value;
        //是否为空
        // if(card === '')
        // {
        //  return false;
        //}
        //校验长度，类型
        if(isCardNo(obj) === false) {return false;}
        //检查省份
        if(checkProvince(obj) === false) {return false;}
        //校验生日
        if(checkBirthday(obj) === false) {return false;}
        //检验位的检测
        if(checkParity(obj) === false) {return false;}
        return true;
    };
    //检查号码是否符合规范，包括长度，类型
    isCardNo = function(obj) {
        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
        if(reg.test(obj) === false) {return false;}
        return true;
    };
    //取身份证前两位,校验省份
    checkProvince = function(obj) {
        var province = obj.substr(0,2);
        if(vcity[province] == undefined) {return false;}
        return true;
    };
    //检查生日是否正确
    checkBirthday = function(obj) {
        var len = obj.length;
        //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
        if(len == '15') {
            var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
            var arr_data = obj.match(re_fifteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date('19'+year+'/'+month+'/'+day);
            return verifyBirthday('19'+year,month,day,birthday);
        }
        //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
        if(len == '18') {
            var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
            var arr_data = obj.match(re_eighteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date(year+'/'+month+'/'+day);
            return verifyBirthday(year,month,day,birthday);
        }
        return false;
    };
    //校验日期
    verifyBirthday = function(year,month,day,birthday) {
        var now = new Date();
        var now_year = now.getFullYear();
        //年月日是否合理
        if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day) {
            //判断年份的范围（3岁到100岁之间)
            var time = now_year - year;
            if(time >= 0 && time <= 130) {return true;}
            return false;
        }
        return false;
    };
    //校验位的检测
    checkParity = function(obj) {
        //15位转18位
        obj = changeFivteenToEighteen(obj);
        var len = obj.length;
        if(len == '18') {
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i, valnum;
            for(i = 0; i < 17; i ++) {cardTemp += obj.substr(i, 1) * arrInt[i];}
            valnum = arrCh[cardTemp % 11];
            if (valnum == obj.substr(17, 1)) {return true;}
            return false;
        }
        return false;
    };
    //15位转18位身份证号
    changeFivteenToEighteen = function(obj) {
        if(obj.length == '15') {
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i;
            obj = obj.substr(0, 6) + '19' + obj.substr(6, obj.length - 6);
            for(i = 0; i < 17; i ++) {cardTemp += obj.substr(i, 1) * arrInt[i];}
            obj += arrCh[cardTemp % 11];
            return obj;
        }
        return obj;
    };


    function testInputInfo(){
        $("#tishiinfor").html("");
        var reg=/0?(13|14|15|18)[0-9]{9}$/;
        var idReg=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
        if(!/^([\u4e00-\u9fa5]{1,7}|[a-zA-Z\.\s]{1,7})$/.test($("#realNameInput").val())){
            $("#tishiinfor").html("姓名不符合规范！");
            return false;
        }else if(!reg.test($("#phonenumber").val())){
            $("#tishiinfor").html("请输入正确的手机号！");
            return false;
        }else if(!scCard()){
            return false;
        }else{
            return true;
        }
    }

    var isAjax=false;
    $("#nextstep").click(function(){
        if(testInputInfo()){
            sendData("first");
        }
    });

    function sendData(type){
        if(!isAjax){
            isAjax=true;
            var validatePart={
                "userId": $.cookie("MYID"),
                "nick":$("#realNameInput").val(),
                "companyName":$("#companyInput").val(),
                "phoneNum":$("#phonenumber").val(),
                "IdCardNum":$("#idInput").val(),
                "duty":$("#professionInput").val()
            };
            $.ajax({
                type:"POST",
                url:validatePartUrl,
                data:{"validatePart":validatePart},
                success:function(d){
                    isAjax=false;
                    console.log(d);
                    $.cookie("validateLevel",1);
                    if(type==="first"){
//                        $("#secondPart").css("display","block");
//                        $("#firstPart").css("display","none");
                        $("#finishNote").css("display","block");
                    }
                    else if(type==="second"){skip();}
                }
            })
        }
    }

    function backPage(){
        $("#secondPart").css("display","none");
        $("#firstPart").css("display","block");
    }

    function testAddMore(){
        $("#tishiinfor2").html("");
        var profession=$("#professionInput").val();
        var companyInput=$("#companyInput").val();
        if(!profession||/^\s+$/.test(profession)){
            $("#tishiinfor2").html("请填写职位称号");
            return false;
        }
        if(!companyInput||/^\s+$/.test(companyInput)){
            $("#tishiinfor2").html("请填写公司组织名称");
            return false;
        }
        return true;
    }

    function saveMore(){
        if(testAddMore()){
            sendData("second");
        }
    }

    //跳过
    function skip(){
        if(/goQue/.test(location.href)){
            $.cookie("expkeyword","");
            $.cookie("expType","");
            $.cookie("sendque","question");
        }
        else if(/goExp/.test(location.href)){
            $.cookie("expkeyword","");
            $.cookie("expType","");
            $.cookie("sendque","");
        }
        location.href="sendexpgpc.html";
    }
</script>
</body>
</html>